import React from 'react'
import { useState, useEffect, } from 'react'
import { Modal, Button, Form, Input, Radio, Switch, } from 'antd';
import type { FormInstance } from 'antd/es/form';
const { TextArea } = Input;
import axios from 'axios'
import "../index.less"

export default function AddCommodity({ info, chooseNum, text }: any) {
    const [hide, setHide] = useState(false);
    const [initialValues, setInitialValues] = useState({});
    const [detailValue, setDetailValue] = useState<any>(info.detail);
    const [open, setOpen] = useState(false);

    const [detailIMGValue, setDetailIMGValue] = useState<any>(info.detailIMG);
    const formRef = React.useRef<FormInstance>(null);
    useEffect(() => {
        onFill(chooseNum)
    });

    const onFill = (num: number) => {
        let shopIMGToString: any = ["http://shop.graceman.com.cn/upload/20140114/20140114115733.jpg", "http://shop.graceman.com.cn/upload/20140114/20140114115739.jpg", "http://shop.graceman.com.cn/upload/20140114/20140114115747.jpg"]
        shopIMGToString = JSON.stringify(shopIMGToString);
        let detailToString: any = {
            生产日期: '2020年03月18日',
            品牌: '晚歌',
            系列: '城堡',
            产地: '法国',
            糖分: '干葡萄酒 （含糖量小于4克/升）',
            香味: '果香',
            包装种类: '瓶装',
            商品规格: '6x2x750ml',
            葡萄酒种类: '红葡萄酒',
            葡萄酒等级: '一等品',
            醒酒时间: '15分钟(含)-30分钟(不含)',
            搭配菜肴: '红肉/野味/陈乳酪',
            // 红肉/野味/陈乳酪: '整箱装',
            葡萄品种: '美乐/梅洛 赤霞珠',
            进口类型: '原汁进口',
            储存条件: '常温',
            采摘年份: '2018-10',
            厂名: '法国新阳光海岸酒庄',
            厂址: '法国',
            厂家联系方式: '4000896311',
            配料表: '葡萄汁，二氧化硫',
            储藏方法: '常温，避光，卧放',
            保质期: '10年',
            食品添加剂: '无'
        }
        detailToString = JSON.stringify(detailToString);
        let detailIMGToString: any = [
            "https://img.alicdn.com/imgextra/i2/1796875493/O1CN01jalFYM1qRqPLhASs8_!!1796875493.jpg",
            "https://img.alicdn.com/imgextra/i3/1796875493/O1CN01VHtQ3X1qRqOAIPnHR_!!1796875493.jpg",
            "https://img.alicdn.com/imgextra/i1/1796875493/O1CN01pH8fma1qRqPTKZuz8_!!1796875493.jpg",
            "https://img.alicdn.com/imgextra/i2/1796875493/O1CN01ssYW8C1qRqMWjixj2_!!1796875493.jpg",
            "https://img.alicdn.com/imgextra/i1/1796875493/O1CN012DdPcd1qRqNzYFM5O_!!1796875493.jpg"
        ]
        detailIMGToString = JSON.stringify(detailIMGToString);
        let commentsToString: any = [
            {
                "userIcon": "http://sns.m.taobao.com/avatar/sns/user/flag/sns_logo?type=taobao&kn=wwc_tb_11&bizCode=taobao_avatar&userFlag=RAzN84GK7wS8eNduDntv2nDbfvYtZaZj519os2JqKHygEiWfFDeGEMqHBTr4x9ZZn7AEA3AQtrruCBFA5eKdiCZUbp6bTUuSbd2GsXkKMPWVhjBaT3e8ChxYsykAuNh1cADN13PTBTPCJaGWFc2rjfy7nD7RhrkbuioAbS1",
                "userName": "星光没你灿烂",
                "userTime": "1个月前",
                "shopCategory": "13瓶帕拉马",
                "userCommont": "红酒一如既往的正品，好喝，每年都要买几箱，这是今年的第四箱啦。还送了专业的倒酒器和瓶盖，方便随时平常。",
                "shopCommentsIMG": [
                    "https://gw.alicdn.com/imgextra/i4/O1CN01X0cJpK1h3Gc5s9bUD_!!0-rate.jpg_110x10000q90.jpg_.webp",
                    "https://gw.alicdn.com/imgextra/i3/O1CN01PIi2iL1h3GcDBfSc1_!!0-rate.jpg_110x10000q90.jpg_.webp",
                    "https://gw.alicdn.com/imgextra/i3/O1CN014o2LCt1s8GiI44d4s_!!0-rate.jpg_110x10000q90.jpg_.webp"
                ],
                "reply": "感谢您对雍天的支持与认可，我们会不断努力，带来更多高性价比的优质好酒以及更细心更便捷的服务,期待您的下次光临哦！",
                "views": 368
            },
            {
                "userIcon": "http://img.alicdn.com/tps/TB1l6dkOXXXXXXEXVXXXXXXXXXX-210-210.png_70x70.jpg",
                "userName": "汤师爷",
                "userTime": "18天前 ",
                "shopCategory": "13瓶帕拉马",
                "userCommont": "红酒已经收到，宝贝完好无损，为掌柜和快递点赞，用餐巾纸法和小苏打法检测，红酒很好。刮开防伪码检测---通过。红酒口感不错，感觉比路易拉菲要好，真的谢谢！很好",
                "shopCommentsIMG": [],
                "reply": "",
                "views": 204
            }
        ]
        commentsToString = JSON.stringify(commentsToString);
        let templateValue = {
            id: 16403113,
            category: "1",
            shopName: '戈斯曼尚品干红葡萄酒',
            shopPicture: "https://gw.alicdn.com/imgextra//01/c5/TB1ZbRYvoY1gK0jSZFMSuuWcVXa.jpg_110x10000q50.jpg_.webp",
            icon: "http://shop.graceman.com.cn/upload/20140114/20140114093050.jpg",
            babyDescription: 4.9,
            sellerService: 4.9,
            logisticsService: 4.9,
            shopIMG: shopIMGToString,
            description: "本品以世界名种葡萄赤霞珠为原料，以独特之工艺发酵后，在酒窖中经橡木桶贮藏陈酿而成，酒体呈深宝石红色，果香馥郁，果香、酒香协调，入口醇香绵长，口感柔和圆润，典型性强。",
            commodityName: '14度法国进口',
            sales: 10002,
            price: 388,
            nowPrice: 278,
            detail: detailToString,
            detailIMG: detailIMGToString,
            comments: commentsToString,
        }

        let newValue = {
            id: undefined,
            category: undefined,
            shopName: undefined,
            shopPicture: undefined,
            icon: undefined,
            babyDescription: undefined,
            sellerService: undefined,
            logisticsService: undefined,
            shopIMG: undefined,
            commodityName: undefined,
            description: undefined,
            sales: undefined,
            price: undefined,
            nowPrice: undefined,
            detail: undefined,
            detailIMG: undefined,
            comments: undefined,
        }

        let fillData = {}
        // 0新建，1默认传值，2一键填充
        switch (num) {
            case 0: fillData = newValue; break;
            case 2: fillData = templateValue; break;
            default:
                break;
        }
        formRef.current?.setFieldsValue(fillData);
    };
    const onChangeSwitch = (checked: boolean) => {
        setHide(!hide)
    };

    const showModal = () => {
        setOpen(true);
        Modal.destroyAll();
    };

    const onFinish = (values: any) => {
        let params = {
            values: values
        }
        axios.post("http://localhost:8080/api/addDetail", params).then((response) => {
            console.log("response.data.result", response.data.result);
        });
        onFill(0)
        setOpen(false);
        // Modal.destroyAll();
    };
    const onCancel = () => {
        setOpen(false);
        Modal.destroyAll();
    };

    return (
        <div className='addCommodity'>
            <Button onClick={showModal}>{text}</Button>
            <Modal
                title="新增商品"
                open={open}
                onCancel={onCancel}
                footer={[
                    <Button key="cancel" onClick={onCancel}>
                        取消
                    </Button>,
                    <Button key="submit" form="myForm" htmlType="submit">
                        提交
                    </Button>,
                ]}
            >
                <Form
                    id="myForm"
                    onFinish={onFinish}
                    initialValues={initialValues}
                    ref={formRef}
                >
                    <Form.Item label="商品id" name="id">
                        <Input />
                    </Form.Item>
                    <Form.Item label="商铺名称" name="shopName">
                        <Input />
                    </Form.Item>
                    <Form.Item label="商品名称" name="commodityName">
                        <Input />
                    </Form.Item>
                    <Form.Item label="葡萄酒分类" name="category">
                        <Radio.Group>
                            <Radio style={{ marginTop: "6px" }} value="1"> 原酒进口葡萄酒 </Radio>
                            <Radio value="2"> 原瓶进口葡萄酒 </Radio>
                            <br />
                            <Radio value="3"> 宁夏葡萄酒 </Radio>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item label="商品图片" name="shopPicture">
                        <Input />
                    </Form.Item>
                    <Form.Item label="商品icon" name="icon">
                        <Input />
                    </Form.Item>
                    <Form.Item label="详情图片" name="shopIMG">
                        <Input />
                    </Form.Item>
                    <Form.Item label="商品原价" name="price">
                        <Input />
                    </Form.Item>
                    <Form.Item label="商品现价" name="nowPrice">
                        <Input />
                    </Form.Item>
                    <Form.Item label="商品描述" name="description">
                        <Input />
                    </Form.Item>
                    <Form.Item label="商品细节" name="detail">
                        <TextArea value={detailValue} onChange={(e) => setDetailValue(e.target.value)} autoSize={{ minRows: 3, maxRows: 5 }} rows={4} />
                    </Form.Item>
                    <Form.Item label="描述图片" name="detailIMG">
                        <TextArea value={detailIMGValue} onChange={(e) => setDetailIMGValue(e.target.value)} autoSize={{ minRows: 3, maxRows: 5 }} rows={4} />
                    </Form.Item>
                    <Form.Item label="隐藏内容" >
                        <Switch defaultChecked onChange={onChangeSwitch} />
                    </Form.Item>
                    {hide ? (
                        <div>
                            <Form.Item label="宝贝描述" name="babyDescription">
                                <Input />
                            </Form.Item>
                            <Form.Item label="卖家服务" name="sellerService">
                                <Input />
                            </Form.Item>
                            <Form.Item label="物流服务" name="logisticsService">
                                <Input />
                            </Form.Item>
                            <Form.Item label="销量" name="sales">
                                <Input />
                            </Form.Item>
                            <Form.Item label="评论" name="comments">
                                <TextArea rows={4} />
                            </Form.Item>
                            <Button type="link" htmlType="button" onClick={() => onFill(2)}>
                                一键填充
                            </Button>
                        </div>
                    ) : (
                        <div hidden>Hidden Element</div>
                    )}
                </Form>
            </Modal>
        </div>
    )
}

